<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 17:15:35
-->
<template>
  <!--1. 容器 -->
  <div ref="left1_container" style="height: 95%"></div>
</template>

<script>
//引入
import { Line } from '@antv/g2plot';

export default {
  data() {
    return {
      dataArr: [
        { year: "2015", value: 5 },
        { year: "2016", value: 4.4 },
        { year: "2017", value: 3.6 },
        { year: "2018", value: 3.1 },
        { year: "2019", value: 0.7 },
        { year: "2020", value: 1.3 },
        { year: "2021", value: 1.9 },
        { year: "2022", value: 2.0 }
      ],
    };
  },
  //生命周期钩子函数
  created() {},
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      //3.创建一个折线图实例对象
      const line = new Line(this.$refs.left1_container, {
        data: this.dataArr,
        xField: "year",
        yField: "value",
      });

      //4.渲染图像
      line.render();
    },
  },
};
</script>

<style scoped>

</style>
